<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="goto">
        <router-link to="/order">
          <img src="../../assets/home_img/left.png" alt="">
        </router-link>
      </div>
      <p>订单详情</p>
    </div>
    <div style="height: 2.4rem"></div>
    <!-- 内容 -->
    <div class="content">
      <p class="ctnname">订单编号：</p>
      <div class="ctntext">
        <p>2141255243524355234 <span style="margin-left: 30%;color: green">配送</span></p>
      </div>
      <p class="ctnname">商品名称：</p>
      <div class="ctntext">
        <p>P.032.5袋装水泥</p>
      </div>
      <p class="ctnname">商品数量：</p>
      <div class="ctntext">
        <p>60吨</p>
      </div>
      <p class="ctnname">收货地址：</p>
      <div class="ctntext">
        <p>汉口市</p>
      </div>
      <p class="ctnname">下单时间：</p>
      <div class="ctntext">
        <p>2019/02/18 11:27:18</p>
      </div>
      <div style="height: 1rem"></div>
    </div>

  </div>
</template>

<script>

</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .header {
    width: 100%;
    height: 2.4rem;
    text-align: center;
    background: #609FE0;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .header p {
    line-height: 2.4rem;
    font-size: 1.05rem;
    color: white;
    font-weight: bolder;
  }
  .goto {
    position: relative;
  }
  .goto img {
    width: 1.8rem;
    height: 1.8rem;
    position: absolute;
    top: 0.3rem;
    left: 0.15rem;
  }
  /* 内容 */
  .content {
    background: white;
    width: 100%;
  }
  .ctnname {
    font-size: 0.92rem;
    padding-top: 1rem;
    margin-left: 0.6rem;
    color: #666666;
  }
  .ctntext {
    width: 84%;
    margin-left: 8%;
    background:  #f2f2f2;
    /*text-align: center;*/
    margin-top: 0.35rem;
    border-radius: 0.25rem;
  }
  .ctntext p {
    line-height: 1.6rem;
    font-size: 0.88rem;
    color: #666666;
    margin-left: 0.6rem;
  }

</style>